<!DOCTYPE html>
<html>
<head>
    <title>E8NET</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <include file="./App/Admin/View/Include/css.html" />

    <!-- this page specific styles -->
    <link rel="stylesheet" href="__PUBLIC__/Admin/css/compiled/chart-showcase.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="__PUBLIC__/Admin/css/compiled/index.css" type="text/css" media="screen" />

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>

    <include file="./App/Admin/View/Include/navbar.html" />
    <include file="./App/Admin/View/Include/menu.html" />

	<!-- main container -->
    <div class="content">

        <div role="breadcrumb">
            <ol class="breadcrumb">
              <li><a href="{:U('Dashboard/index')}">仪表盘</a> / </li>
              <li class="active">数据表格</li>
            </ol>
        </div>

        <div class="container-fluid">
            <div id="pad-wrapper">
                <!-- App日流量统计表 -->
                <div class="row-fluid">
                    <div class="span12">
                        <div id="visitDiv">
                            <div id="visit" style="height: 400px;"></div>
                        </div>

                        <div class="btn-group toggle-inputs hidden-tablet pull-right">
                            <button class="glow left" data-input="vlast">往前十天</button>
                            <button class="glow center" data-input="vnow">最近十天</button>
                            <button class="glow right" data-input="vnext">往后十天</button>
                        </div>

                    </div>
                </div>

                <!-- App日旷课数量统计表 -->
                <div class="row-fluid section">
                    <div class="span12 chart">

                        <div id="attend" style="height: 400px;"></div>

                        <div id="attend-btn-group" class="btn-group toggle-inputs hidden-tablet pull-right">
                            <button class="glow left" data-input="alast">往前十天</button>
                            <button class="glow center" data-input="anow">最近十天</button>
                            <button class="glow right" data-input="anext">往后十天</button>
                        </div>
                    </div>
                </div>


            </div>
        </div>
    </div>
    <!-- end main container -->

    <include file="./App/Admin/View/Include/js.html" />
    <include file="./App/Admin/View/Include/modal.html" />

    <script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/highcharts.js">
    </script>

    <script type="text/javascript">

        // 访问量图表配置
        var visitOptions = {
            chart: { 
                type: 'spline',
                renderTo:'visit'
            },
            title: {
                text: 'App近十日流量统计表',
                x: -20 //center
            },
            subtitle: {
                text: '主要包括教师、学生日访问量',
                x: -20
            },
            xAxis: {
                categories: {$date}
            },
            yAxis: {
                title: {
                    text: '访问次数'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            tooltip: {
                valueSuffix: '次'
            },
            series: {$visitData}
        };

        // 出勤统计图表配置
        var attendOptions = {
            chart: { 
                type: 'spline',
                renderTo:'attend'
            },
            title: {
                text: 'App近十日考勤情况统计表',
                x: -20 //center
            },
            subtitle: {
                text: '主要包括所有学生的统计数据',
                x: -20
            },
            xAxis: {
                categories: {$date}
            },
            yAxis: {
                title: {
                    text: '相应考勤次数'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            tooltip: {
                valueSuffix: '次'
            },
            series: {$attendData}
        };


        $(function () {
            // 初始化图表
            var visitChart = new Highcharts.Chart(visitOptions);
            var attendChart = new Highcharts.Chart(attendOptions);

            var $buttons = $(".toggle-inputs button");
            $buttons.click(function () {
                var val = $(this).data("input");
                var url = val.substr(0,1) == 'v'?"__CONTROLLER__/refreshVisitChart":"__CONTROLLER__/refreshAttendChart";
                var type = val.substr(1);

                lshow();
                // 提交ajax请求
                $.ajax({
                    //async : true,
                    type: "post",
                    url: url,
                    dataType: "json",
                    data: {type:type},
                    timeout : 20000,
                    success: function(result) {
                        if (result.result == "RESULT_OK") {
                            // 如果是出勤图表
                            if (val.substr(0,1) == 'v') {
                                visitOptions.xAxis.categories = result.data.date;
                                visitOptions.series = result.data.data;
                                visitChart = new Highcharts.Chart(visitOptions);
                            } else {
                                attendOptions.xAxis.categories = result.data.date;
                                attendOptions.series = result.data.data;
                                attendChart = new Highcharts.Chart(attendOptions);
                            }
                            lhide();
                        } else {
                            lhide();
                            alert(result.msg);
                        }
                    },
                    error: function(request) {
                        lhide();
                        alert('提交失败');
                    }
                });
            });

        });
    </script>

    <!-- build the charts -->
    <script type="text/javascript">

        // Morris Line Chart
        // var tax_data = {$visitData};
        // Morris.Line({
        //     element: 'visit',
        //     data: tax_data,
        //     xkey: 'period',
        //     ykeys: ['teacher', 'student'],
        //     labels: ['教师', '学生'],
        //     resize: true
        //     //dateFormat: function (x) { return new Date(x).toString(); }
        // });



        // Morris Area Chart
        // Morris.Area({
        //     element: 'attend',
        //     data: {$attendData},
        //     xkey: 'period',
        //     ykeys: ['kk', 'cd' , 'qj' , 'zt'],
        //     labels: ['旷课', '迟到' , '请假' , '早退'],
        //     lineWidth: 2,
        //     hideHover: 'auto',
        //     lineColors: ["#999999" , "#81d5d9", "#a6e182" , "#cccccc"],
        //     resize: true
        //   });

    </script>

</body>
</html>